<template>
  <view class="wrapper" :style="{position:'relative',top:top}">
    <view class="header-box">
      <view class="search-line">
        <view class="search-block">
          <view class="iconfont icon-sousuo search-icon"></view>
          <input
            @input="clearResult"
            :placeholder="$t('search.Search...')"
            placeholder-style="color: #878787;"
            class="search-input"
            v-model="mix"
            :confirm-type="$t('feeServices.search')"
            :confirm-hold="true"
            @confirm="handleSearchUser"
            @blur="handleSearchUser"
            :adjust-position="false"
            cursor-spacing="15"
          />
          <view class="search-btn" @click="handleSearchUser">
            {{ $t("feeServices.search") }}
          </view>
        </view>
        <view class="cancel-btn" @click.stop="handleCancel">{{$t('index.Cancel')}}</view>
      </view>
      <view v-if="!mix && false">
        <view class="quick-search-group">
          <!-- 约会 -->
          <view class="label">
            <view class="iconfont icon-shangchengxuanzhong shop-icon"></view>
            <view class="label-text">{{$t('discover.Dating')}}</view>
          </view>
          <!-- 收费服务 -->
          <!-- <view class="label">
            <view class="iconfont icon-hezuo1 dating-icon"></view>
            <view class="label-text">{{$t('discover.Services-for-a-fee')}}</view>
          </view> -->
          <!-- 工作 -->
          <!-- <view class="label">
            <view class="iconfont icon-jifenguizeguankong offer-icon"></view>
            <view class="label-text">{{$t('discover.Jobs')}}</view>
          </view> -->
        </view>
      </view>
    </view>
    <view class="cell-group" :style="cellGroupHeight" v-if="!isSearch || isSearch && (strangerList.length + contactsList.length === 0)">
      <!-- <view class="cell-line" v-for="item in 0" :key="item">
        <image src="@/static/image/default-avatar.png" class="avatar" mode="aspectFill"></image>
        <view class="chat-info">
          <view class="line">
            <view class="nick-name">Minatozaki Sana</view>
            <view class="time">20:16</view>
          </view>
          <view class="line line-margin">
            <view class="message">this is her brother Bruce haha!</view>
          </view>
        </view>
      </view> -->
      <view v-if="isSearch" class="empty-result">
        <view class="iconfont icon-wujieguo"></view>
        <view class="empty-text">{{ $t("search.resultEmptyLeft") }}<text class="empty-green">{{ $t("search.Me") }}</text>{{ $t("search.resultEmptyRight") }}</view>
      </view>
    </view>
    <SearchResult
      v-else
      :contactsList="contactsList"
      :strangerList="strangerList"
    />
  </view>
</template>

<script>
import { queryUserList } from "@/services/user";
import SearchResult from "../components/SearchResult.vue";
export default {
  components: { SearchResult },
  data() {
    return {
      mix: "",
      top:'',
      pageSize: 20,
      pageNum: 1,
      strangerList: [],
      contactsList: [],
      chatParam: {
        startTime: 0, // 获取会话列表所使用的时间戳，需要精确到毫秒，0表示当前时间
        count: 10, // 想要获取的会话列表数量，默认值 300，最大值 1000
        order: 0, // 会话排序方式: 0按会话生成时间倒序排列，即获取早于 startTime 生成的会话列表,1按会话生成时间正序排列，即获取晚于 startTime 生成的会话列表
      },
      cellGroupHeight: 0,
      isSearch: false
    };
  },
  mounted() {
    const query = uni.createSelectorQuery().in(this);
    query
      .select(".header-box")
      .boundingClientRect((data) => {
        // header-box节点高度
        const headerBoxHeight = data.height + "px";
        this.cellGroupHeight =
          'height:' + 'calc(' + '100vh'+' '+ '-'+ ' '+headerBoxHeight + ')';
      })
      .exec();
  },
  methods: {
    clearResult() {
      this.isSearch = false
      this.strangerList = []
      this.contactsList = []
    },
    async handleSearchUser() {
      if (!this.mix) {
        this.clearResult()
        return
      }
      uni.showLoading()
      const resp = await queryUserList({
        mix: this.mix,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      });
      if (!resp.success) return;
      const allUserList = resp.result.rows;
      this.strangerList = allUserList.filter((item) => item.isFriend == 0);
      this.contactsList = allUserList.filter((item) => item.isFriend == 1);
      uni.hideLoading()
      this.isSearch = true
      console.log(this.strangerList, this.contactsList, "shuzu");
    },
    handleCancel() {
      this.mix = "";/*  */
      this.clearResult()
      uni.navigateBack();
    },
    // 获取消息列表
    async getChatList() {
      const res = await this.$RongIMLib.getConversationList(this.chatParam);
      if (res.code === 0) {
        let userIdArr = [];
        res.data.forEach((item) => {
          userIdArr.push(item.targetId);
        });
        this.getBatchUserInfo(userIdArr.join(","), res.data);
      } else {
        console.log(res, res.code, res.msg);
      }
    },
  },
  onLoad() {
   	const sysInfo = uni.getSystemInfoSync();
    this.top=sysInfo.safeArea.top+'px'
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  .header-box {
    box-sizing: border-box;
    padding: 30upx 30upx 0;
    .search-line {
      display: flex;
      align-items: center;
      .search-block {
        width: 100%;
        height: 76upx;
        background: #ffffff;
        border-radius: 38upx;
        box-sizing: border-box;
        padding: 30upx;
        padding-right: 8upx;
        display: flex;
        align-items: center;
        .search-icon {
          color: #878787;
          font-size: 30upx;
        }
        .search-input {
          flex: 1;
          margin-left: 30upx;
          font-size: 26upx;
          font-weight: 400;
          color: #212121;
          line-height: 1em;
        }
        .search-btn {
          min-width: 120upx;
          width: fit-content;
          padding: 0upx 20upx;
          height: 60upx;
          box-sizing: border-box;
          background: #61bdb2;
          border-radius: 34upx;
          font-size: 24upx;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #ffffff;
          text-align: center;
          line-height: 60upx;
          margin-left: 10upx;
        }
      }
      .cancel-btn {
        margin-left: 30upx;
        font-size: 26upx;
        font-weight: 400;
        color: #4eafa3;
				white-space: nowrap;
      }
    }
    .quick-search-group {
      margin-top: 16upx;
      display: flex;
      flex-wrap: wrap;
      .label {
        margin-top: 24upx;
        margin-right: 24upx;
        box-sizing: border-box;
        padding: 0 26upx;
        height: 58upx;
        display: flex;
        align-items: center;
        background: #ffffff;
        border-radius: 20upx;
        .shop-icon {
          color: #795edd;
          font-size: 30upx;
        }
        .dating-icon {
          color: #be75c1;
          font-size: 30upx;
        }
        .offer-icon {
          color: #6ab2e5;
          font-size: 30upx;
        }
        .transaction-icon {
          color: #69da94;
          font-size: 40upx;
        }
        .recruitment-icon {
          color: #f5a527;
          font-size: 34upx;
        }
        .activity-icon {
          color: #f1513c;
          font-size: 30upx;
        }
        .leasing-icon {
          color: #68d5bf;
          font-size: 48upx;
        }
        .label-text {
          margin-left: 12upx;
          font-size: 26upx;
          font-weight: 400;
          color: #000000;
          line-height: 1em;
        }
      }
    }
  }
  .cell-group {
    margin-top: 40upx;
    width: 100%;
    box-sizing: border-box;
    padding: 0 30upx;
    background: #ffffff;
    .empty-result {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 320rpx 0rpx 200rpx;
      .icon-wujieguo {
        font-size: 116rpx;
        color: #E6E6E6;
      }
      .empty-text {
        margin-top: 30rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #878787;
        line-height: 33rpx;
        .empty-green {
          color: #61BDB2;
        }
      }
    }
    &.cell-group > view:nth-last-child(1) {
      border-bottom: none;
    }
    .cell-line {
      width: 100%;
      height: 162upx;
      display: flex;
      align-items: center;
      border-bottom: 2upx solid #f6f6f6;
      .avatar {
        flex-shrink: 0;
        width: 100upx;
        height: 100upx;
        background: linear-gradient(0deg, #ffe983 0%, #ff9662 100%);
        border-radius: 50%;
      }
      .chat-info {
        flex: 1;
        margin-left: 35upx;
        .line {
          display: flex;
          justify-content: space-between;
          align-items: center;
          &.line-margin {
            margin-top: 25upx;
          }
          .nick-name {
            font-size: 30upx;
            font-weight: 400;
            color: #000000;
            line-height: 1em;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
          }
          .time {
            font-size: 24upx;
            font-weight: 400;
            color: #878787;
          }
          .message {
            font-size: 26upx;
            font-weight: 400;
            color: #878787;
            line-height: 1em;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>